<template>
  <div class="">
    <el-dialog title="开具发票" :visible.sync="dialogVisible" width="30%" center>
      <!-- 开票凭证 start -->
      <TitleLine>
        <span style="color: #fc4560">*</span>
        <span>开票凭证</span>
      </TitleLine>
      <UploadImage
        :isShowTip="false"
        :lazy="true"
        :file-type="['jpg', 'png', 'jpeg']"
        file-pixel="60*60"
        :file-size="1"
        :limit="1"
        v-model="formData.voucher"
      />
      <!-- 开票凭证 end -->

      <!-- 备注 start -->
      <TitleLine title="备注" />
      <el-input
        type="textarea"
        v-model.trim="formData.remark"
        placeholder="请输入开票备注100字以内"
        :maxlength="100"
        :show-word-limit="true"
        :rows="3"
      ></el-input>
      <!-- 备注 end -->

      <span slot="footer" class="flex justify-end">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import _ from 'lodash'
export default {
  name: 'CompanyInfoOpenInvoice',
  components: {},
  props: {
    // 控制显示
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '',
      // 表单
      formData: {
        // 凭证
        voucher: '',
        // 备注
        remark: ''
      }
    }
  },
  computed: {
    // 是否显示
    dialogVisible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations('base', ['SET_INVOCIE_LOG']),
    // 点击取消
    cancle() {
      // 清空表单
      for (let key in this.formData) {
        this.formData[key] = ''
      }
      this.dialogVisible = false
    },

    // 点击确定
    confirm: _.debounce(function () {
      if (!this.formData.voucher) {
        this.$message.error('请上传凭证')
        return
      }
      // 发送请求
      this.$http.user.etpInvoiceRecord
        .handle({ id: this.id, ...this.formData })
        .then(res => {
          if (res.status === 200) {
            this.$message.success('操作成功')
            this.SET_INVOCIE_LOG(true)
            this.$emit('openInvoiceResult')
            this.cancle()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('confirm', err)
        })
    }, 400)
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  padding-top: 0;
}
</style>
